<template>
	<view class="container">
		<view class="head">
			<!-- 顶部 -->
			<u-navbar :is-back="false" title="消息" title-color="#FFF" backIconColor="#fff"
				:background="background">
				<view class="navbar-right" slot="right">
					<view class="message-box right-item">
						<u-icon name="https://resourse.cnlhjt.com/upload/20220831/80a4995b2e6160113917853147be4b38.png"
							size="38" @click="contact"></u-icon>
					</view>
					<!-- <view class="message-box right-item"><u-icon name="plus" size="38"></u-icon></view> -->
				</view>
			</u-navbar>
		</view>
		<view class="content">
			<!-- <u-search margin="15rpx" placeholder="搜索" v-model="keyword"></u-search> -->

			<view class="u-card-ime" :head-border-bottom="false" :foot-border-top="false" padding="0" margin="10rpx"
				v-for="(item, index) in friendList" :key="index" :title-bold="false" :border="false">
				<view @longpress="more(index)" class="u-card-head" v-if="item.sid <= 0"
					style="background-color: #F0F8FF;">
					<view class="u-card__head u-flex u-row-left">
						<view class="u-m-r-10">
							<u-avatar :src="item.avatar" mode="circle" :show-level="false"
								@click="showUserInfo(item.sid)"></u-avatar>
							<u-badge style="margin-top: -15rpx;" type="error" :count="item.count"></u-badge>
						</view>
						<view class="u-flex-1" style="margin-left: 20rpx; width: 80%;" @click="intoChat(item, index)">
							<view style="float: left;" class="u-font-18 u-p-b-10">{{ item.nickname }}</view>
							<view style="float: right; margin-right: 20rpx;" class="u-m-l-10 u-p-10">
								<view class="u-font-13 u-tips-color">{{ item.date }}</view>
							</view>
							<view style="clear: both; text-overflow: ellipsis;" class="u-font-14 u-tips-color u-line-1">
								{{ item.message }}</view>
						</view>
					</view>
				</view>
				<view class="u-card-head" v-if="item.sid > 0" @longpress="more(index)">
					<view class="u-card__head u-flex u-row-left">
						<view class="u-m-r-10">
							<u-avatar :src="item.avatar" mode="circle" :show-level="false"
								@click="showUserInfo(item.sid)"></u-avatar>
							<u-badge style="margin-top: 75rpx;" type="error" :count="item.count"></u-badge>
						</view>
						<view class="u-flex-1" style="margin-left: 20rpx; width: 80%;" @click="intoChat(item, index)">
							<view style="float: left;" class="u-font-18 u-p-b-10">{{ item.nickname }}</view>
							<view style="float: right; margin-right: 20rpx;" class="u-m-l-10 u-p-10">
								<view class="u-font-13 u-tips-color">{{ item.date }}</view>
							</view>
							<view style="clear: both; text-overflow: ellipsis;" class="u-font-14 u-tips-color u-line-1">
								<rich-text :nodes="item.message"></rich-text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-toast ref="uToast" />
			<u-action-sheet :list="list" v-model="show" @click="removeMessage"></u-action-sheet>
			<u-empty style="margin-top: 300rpx;" icon-size="240" color="#666" icon-color="#666" font-size="40"
				:text="msg" mode="message" :show="showEmpty"></u-empty>
		</view>
		<u-tabbar v-model="current" height="110rpx" activeColor="#0c838b" :list="vuextabbar" :mid-button="false">
		</u-tabbar>
	</view>
</template>

<script>
	import {
		getMessageList,
		remove
	} from '@/service/messageService.js';
	export default {
		data() {
			return {
				background: {
					//backgroundColor: '#F5F5F5',

					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(100deg, rgb(0,130,138), rgb(76,167,173))'
				},
				keyword: '',
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				showEmpty: false,
				messageList: [],
				list: [{
					text: '删除聊天记录',
					color: 'red'
				}],
				show: false,
				fid: 0,
				index: '',

			};
		},

		computed: {
			vuextabbar() {
				let tabbar = this.$store.state.vuex_tabbar;
				tabbar[2].count = 0;
				return tabbar;
			},
			friendList() {
				// console.log(12313123);
				return this.$store.state.friendList;
			}
		},
		mounted() {
			getMessageList().then(this.getMessageList);
		},
		methods: {
			getMessageList(e) {
				if (e.code !== 200) {
					this.$u.vuex('friendList', e.result.data);
					this.showEmpty = true;
					this.msg = e.msg;
				}
			},
			showUserInfo(sid) {
				if (sid <= 0) {
					return;
				}
				this.$u.route({
					url: '/pages/user/user-info',
					params: {
						sid: sid
					}
				});
			},
			intoChat(item, index) {
				this.messageList = this.$store.state.friendList;
				let count = this.messageList[index].count;
				let total = this.$store.state.messageNum;
				if (total - count >= 0) {
					this.$u.vuex('messageNum', total - count);
				}
				this.messageList[index].count = 0;
				this.$u.vuex('friendList', this.messageList);
				this.$u.route({
					url: '/pages/message/chat',
					params: {
						sid: item.sid,
						nickname: item.nickname,
						avatar: item.avatar,
						level: item.level
					}
				});
			},
			contact() {
				this.$u.route({
					url: '/pages/managerJobs/addressBook'
				});
			},
			more(index) {
				this.messageList = this.$store.state.friendList;
				this.index = index;
				this.fid = this.messageList[index].sid;
				this.show = true;
			},
			removeMessage(index) {
				if (index == 0) {
					remove({
						fid: this.fid
					}).then(this.removeResult);
				}
			},
			removeResult(e) {
				if (e.code == 200) {
					this.messageList.splice(this.index, 1);
					this.$u.vuex('friendList', this.messageList);
					this.$refs.uToast.show({
						title: e.msg,
						type: 'success'
					});
				} else {
					this.$refs.uToast.show({
						title: e.msg,
						type: 'warning'
					});
				}
			}
		}
	};
</script>

<style>
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.right-item {
		margin: 0 15rpx;
		position: relative;
		color: #0060f7;
		display: flex;
	}

	.u-card-head {
		padding: 20rpx 10rpx;
	}
</style>
